import React from "react";
import "./list-item.less";

const classPrefix = `bbt-react-listitem`;

export type ListItemProps = {
  children: React.ReactNode;
  className?: string;
  styles?: React.CSSProperties;
  label: string | React.ReactNode;
  required?: boolean;
};

export const ListItem = ({
  children,
  className = "",
  styles = {},
  label,
  required = false,
}: ListItemProps) => {
  return (
    <div
      className={`${classPrefix} ${className}`}
      style={{
        ...styles,
      }}
    >
      <div className={`${classPrefix}-label`}>
        {label}
        {required ? <span className={`${classPrefix}-required`}>*</span> : null}
      </div>
      {children}
    </div>
  );
};
